<template>
	<view class="head2" :style="headBack">
		<!-- gui-flex  -->
		<view style="display: flex; align-items: center; width: 76%; margin-left: 20rpx;">
			<view style="display: flex; align-items: center;">
				<image src="../../static/home/touziHong.png" mode="heightFix"
					style="width: 55rpx; height: 55rpx; margin-top: 20rpx; ">
				</image>
				<view v-if="user" style="font-size: 30rpx; margin-top: 20rpx; margin-left: 15rpx; color: white;">
					{{user.real_name}}
					<!-- , {{greeting}}! -->
				</view>
			</view>
			<!-- <view style="position: relative; margin-left: 175rpx; margin-top: 20rpx;">首页</view> -->
			<!-- 搜索栏 -->
			<view class="sousuo">
				<gui-search	 @confirm ="search" placeholder="请输入关键字" :customClass="search_css" height="45rpx" font-size="20rpx" iconWidth="30rpx"></gui-search>
			</view>
		</view>
		<view class="tianqibj">
			<image v-if="weather.now.text.includes('晴')" src="../../static/weather/qing.png" mode="heightFix"
				class="tianqi"></image>
			<image v-else-if="weather.now.text.includes('多云')" src="../../static/weather/duoyun.png" mode="heightFix"
				class="tianqi"></image>
			<image v-else-if="weather.now.text.includes('雨')" src="../../static/weather/yu.png" mode="heightFix"
				class="tianqi"></image>
			<image v-else-if="weather.now.text.includes('阴')" src="../../static/weather/yin.png" mode="heightFix"
				class="tianqi"></image>
			<image v-else-if="weather.now.text.includes('雪')" src="../../static/weather/xue.png" mode="heightFix"
				class="tianqi"></image>
			<image v-else src="../../static/weather/yin.png" mode="heightFix" class="tianqi"></image>
			<view style="color: white; margin-left: 5rpx; font-size: 25rpx; margin-top: -10rpx;">
				<view style="">{{weather.now.text}}</view>
				<view>{{weather.now.temperature}}℃</view>
			</view>
			<!-- <image src="../../static/homePage/xiangyou.png" mode="heightFix" class="arrow"></image> -->
		</view>
	</view>
</template>
<script>
	import graceJS from "@/Grace6/js/grace.js"
	export default {
		name: "notice",
		props: {
			width: {
				type: Number,
				default: 0
			},
			showPopup: {
				type: Boolean,
				default: false
			},
			size: {
				type: Number,
				default: 26
			},
			lineHeight: {
				type: Number,
				default: 1.8
			},
			padding: {
				type: Number,
				default: 15
			},
			margin: {
				type: Number,
				default: 15
			},
			// headBack      : {type:Array,  default:function(){
			// 	return [];
			// }},
			borderRadius: {
				type: Number,
				default: 6
			},

			headBack: {
				type: String,
				default: 'rgba(255,255,255,0)'
			},
			backColor: {
				type: String,
				default: 'rgba(255,255,255,0)'
			},
			
			greeting: {
				type: String,
			},
			weather: {
				type: Object,
				default: {
					now: {
						text: ''
					}
				}
			}
		},
		data() {
			return {
				search_css:['gui-bg-gray', 'gui-dark-bg-level-3'],
				tapping: false,
				isShowPopup: this.showPopup,
				user:uni.getStorageSync("userInfo")
			}
		},
		mounted() {
			//this.user=uni.getStorageSync("userInfo");
			console.log("head->user",this.user);
		},
		methods: {
			dengmi() {
				uni.navigateTo({
					url: '/pages/dati/dati'
				})
			},
			tapme: function() {
				this.$emit('tapme', this.data);
			},
			showPopup1() {
				uni.navigateTo({
					url: '/pages/member/member'
				})
				// window.location.href = 'https://jf.boyaltd.cn/card/#/pages/signature/member';
				// this.isShowPopup = true
				// this.$emit('func',this.isShowPopup)
			},
			search(e) {
				console.log("search", e);
				uni.navigateTo({
					url: "/pages/comm/search?t=" + e
				});
			}
			
		},
		emits: ['tapme']
	}
</script>
<style lang="scss" scoped>
	.head2 {
		min-height: 95rpx;
		// background: url('../../static/home/zhongjian.png') 100% 100% / 100% 100%;
		background: url('../../static/home/topLanHui.png') 100% 100% / 100% 100%;
		background-color: #EBF2F7;
	}

	.gui-tags {
		text-align: center;
	}

	.gui-tag-opacity {
		opacity: 0.88;
	}

	.sousuo {
		width: 250rpx;
		height: 50rpx;
		margin-top: 20rpx;
		border-radius: 50rpx;
		// background-color: rgba(255, 255, 255, 0.4);
		margin-left: 40rpx;
		display: flex;
		align-items: center;
	}

	.tianqibj {
		position: absolute;
		top: 0;
		right: 0;
		width: 150rpx;
		height: 95rpx;
		display: flex;
		align-items: center;
		// background: url('@/static/4.png') 100% 100% / 100% 100%;
	}

	.arrow {
		// color: white;
		height: 24rpx;
		position: absolute;
		margin-top: -8rpx;
		margin-left: 35rpx;
		// background-color: rgba(0, 0, 0, 0.2);
		// box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
		// animation: arrow-move 1.2s infinite;
		// border-radius: 50rpx;
	}

	@keyframes arrow-move {
		0% {
			left: 0;
		}

		50% {
			left: 6rpx;
		}

		100% {
			left: 0;
		}
	}

	.tianqi {
		height: 50rpx;
		margin-left: 32rpx;
		margin-top: -10rpx;
	}

	// .arrow-container {
	// 	position: relative;
	// 	width: 100%;
	// 	height: 20px;
	// 	/* 调整高度适配您的需求 */
	// 	overflow: hidden;
	// }

	// .arrow {
	// 	position: absolute;
	// 	top: 18%;
	// 	// left: -100px;
	// 	/* 初始位置在屏幕外，调整距离适配您的需求 */
	// 	width: 50px;
	// 	/* 调整宽度适配您的需求 */
	// 	height: 20px;
	// 	/* 调整高度适配您的需求 */
	// 	background-color: #fff;
	// 	transform: translateY(-50%);
	// 	animation: arrowMovement 2s linear infinite;
	// 	background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
	// 	/* 调整流光颜色和透明度适配您的需求 */
	// }

	// @keyframes arrowMovement {
	// 	0% {
	// 		left: -100px;
	// 		/* 动画起始位置 */
	// 	}

	// 	50% {
	// 		left: calc(100% + 100px);
	// 		/* 动画中间位置，根据容器宽度和箭头宽度计算 */
	// 	}

	// 	100% {
	// 		left: -100px;
	// 		/* 动画结束位置 */
	// 	}
	// }
</style>